<template>
 <view class="mypage-container">
    <!-- 自定义头部 -->
    <view class="head"></view>
	
    <!-- 个人信息模块 -->
    <view class="user-info-box" @click="userInfoClick">
		
      <view class="avatar-box">
		  <!-- 头像 -->
		<image :src="userInfo.headImg" class="avatar" style="height: 100rpx;width: 100rpx;"/>
        <!-- <image class="avatar" src="../../static/me/1.png"></image> -->
		
        <view class="avatar-text">
          <view class="name">{{ userInfo.nickName }}</view>
		  <!-- 角色 -->
          <view class="desc">老师</view>
        </view>
      </view>
      
      <view class="card-one"></view>
    </view>
	
	
    <!-- 占位 空出user-info-box的距离 -->
   <!-- <view class="size-seat">
    </view> -->
    <!-- 中间部分 -->

	<view class="user-center-box">
      <view class="user-center-item" @click="toMyClass">
        <view class="user-center-star-icon">
          <image src="../../static/me/2.png"></image>
        </view>
        <view class="user-center-star-title">
          我的班级
        </view>
      </view>
	</view>
	
	<!-- 意见反馈/关于我们/使用帮助 -->
		<view class="margin-top-xs">
			<view class="bg-white flex justify-between solid-bottom padding" v-for="(item,index) in itemList" @click="itemClick(item,index)">
				<view class="flex align-center">
					<image :src="item.imgPath" mode="" style="height: 40rpx;width: 40rpx;"></image>
					<!-- <view class="text-cyan" :class="'cuIcon-'+item.imgPath"></view> -->
					<text class="margin-left-xs text-xs" style="color: #333333;font-weight: Regular;">{{item.name}}</text>
				</view>
				<view class="">
					<view class="cuIcon-right text-gray"></view>
				</view>
			</view>
		</view>
		
		<view-tabbar :current="1"> </view-tabbar>
	</view>
</template>

<script>
	import tab from "@/components/teacher-tabbar/teacher-tabbar.vue"
	export default {
		components:{
				'view-tabbar': tab
			},
		data() {
			return {
				userInfo:{
					phone:"",
					nickName:"",
					headImg:"",
				},
				teacherId:null,
				classId: null,
				className: null,
				itemList:[
	
					{
						type:"fankui",
						name:"意见反馈",
						imgPath:"/static/me/21.png",
						pagePath:"/subpkg/commons/fankui/fankui"
					},
				
					{
						type:"aboutUs",
						name:"关于我们",
						imgPath:"/static/me/22.png",
						pagePath:"/subpkg/commons/aboutus/aboutus"
					},
					{
						type:"help",
						name:"使用帮助",
						imgPath:"/static/me/23.png",
						pagePath:"/subpkg/commons/help/help"
					},
					
					
				],
				parentId: null ,//暂时先写死=========之后改成null就行
				parentRelation: ''
			}
		},
		onShow() {
		   uni.hideTabBar({
		    animation: false
		   })
		  },
		onLoad() {
			this.initData()
			uni.$on("meUpdate",()=>{
				this.initData()
			})
			this.parentRelation = uni.getStorageSync("parentRelation")
			this.parentId = uni.getStorageSync("parentId") //parentId不写死就取消这行注释
			
		},
		methods: {
			//点击跳转我的班级
			toMyClass(){
				uni.$common.navigateTo("/subpkg/teacher/teacher-class/teacher-class?teacherId="+this.teacherId)

			},
			//点击, 获取用户个人信息
			initData(){
				this.teacherId = uni.getStorageSync("teacherId")
				this.kgId = uni.getStorageSync("kgId")
				this.classId = uni.getStorageSync("classId")
				this.className = uni.getStorageSync("className")
				
				uni.$api.appPageMe().then(data=>{
					this.userInfo = data.userInfo
				})
			},
			//点击个人中心,跳转页面
			userInfoClick(){
				uni.$common.navigateTo("/subpkg/me/userinfo/userinfo")
			},
			//页面跳转
			itemClick(item,index){
				if(item.type == "aboutUs"){ //关于我们
					uni.$common.navigateTo("/subpkg/commons/aboutus/aboutus")
				
				}else if(item.type == "weixin"){
					uni.$api.configAboutMe().then(data=>{
					 	uni.$common.navigateTo("/subpkg/commons/login/login", {
					type: "HTML",
							title: data.name,
							content: encodeURIComponent(JSON.parse(data.value).content)
					 	})
					 })
				}
				else if(item.type == "help"){//使用帮助
					uni.$common.navigateTo("/subpkg/commons/help/help")
				}
				else if(item.type == "fankui"){//意见反馈
					uni.$common.navigateTo("/subpkg/commons/fankui/fankui")
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	/* 自定义头部 */
		.head {
		  height: 140rpx;
		}
		.class-box{
			width: 100%;
			background-color: white;
			position: relative;
			top: 100rpx;
		}
		/* 用户信息部分 */
		.user-info-box {
		  display: flex;
		  flex-direction: row;
		  justify-content: space-between;
		  align-items: center;
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 300rpx;
		  background: linear-gradient(90deg, #ffffff 0, #F5C54F 45%, #F5C54F);
		}
		
		.avatar-box {
		  display: flex;
		  flex-direction: row;
		  align-items: center;
		  justify-content: flex-start;
		  align-items: center;
		  padding-left: 40rpx;
		  margin-top: 80rpx;
		}
		
		.avatar-box .avatar {
		  width: 116rpx;
		  height: 116rpx;
		  border-radius: 116rpx;
		}
		
		.avatar-box .avatar-text {
		  padding-left: 20rpx;
		}
		
		.avatar-text .name {
		  font-size: 20px;
		  font-weight: 500;
		  color: black;
		}
		
		.avatar-text .desc {
			background-color: #F5C44B;
			width: 80rpx;
			height: 30rpx;
			text-align: center;
			border-radius:  15rpx;
			color: #fff;
			margin-top: 10px;
			font-size: 12px;
		}
		
		
		/* 中间部分 */
		.user-center-box {
			width: 100%;
			display: flex;
			// flex-direction: row;
			// align-items: center;
			background-color: #fff;
			// justify-content: flex-start;
			padding: 100rpx 50rpx 30rpx 50rpx;
			margin-bottom: 0px;
		}
		
		.user-center-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: flex-start;
			background-color: #fff;
			width: 200rpx;
			// height: ;
			margin: 50rpx 10rpx 0 10rpx;
			padding: 20rpx 30rpx 20rpx 30rpx;
			// box-shadow: 0 0px 20px rgba(231, 231, 231, 0.6);
			// border-radius: 16rpx;
		}
		
		.user-center-star-icon {
		  display: flex;
		  flex-direction: row;
		  align-items: center;
		  justify-content: center;
		  width: 128rpx;
		  height: 128rpx;
		  border-radius: 80rpx;
		  border-radius: 80rpx;
		  /* background-image: linear-gradient(to bottom right, #4CCE84, #4BCD85, #49CD84); */
		  margin-right: 10rpx;
		}
		.margin-top-xs{
			border-top: 1px solid #c8c8c8;
			margin: 0px;
		}

		.user-center-star-icon image {
		  width: 60%;
		  height: 60%;
		}
		
		.user-center-star-title {
		  font-weight: 550;
		  font-size: 12px;
		  padding-top: 10rpx;
		  color: #303133;
		}
	
	
</style>
